* {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

body {
	font-family: "微软雅黑";
	color: #14191e;
	/*background-color: #2A2A2A;*/
}
a:hover{
	text-decoration: none;
}
span {
	font-size: 14px;
}
.head{
	/*height: 60px;*/
	width: 100%;
	/*box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);*/
}
.head iframe{
	height: 60px;
	border: 1px solid #fff;
	z-index: 1100;
	position: absolute;
}
.main {
	width: 1180px;
	height: 460px;
	margin-top: 30px;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background-color: #93999f;
	box-shadow: 0 12px 24px 0 rgba(7,17,27,.2);
}

.banner {
	height: 345px;
	width: 936px;
	overflow: hidden;
	position: relative;
	left: 229px;
}

.banner-slide {
	height: 460px;
	width: 1200px;
	background-repeat: no-repeat;
	position: absolute;
	display: none;
}

.slide1 {
	background: url(https://img.mukewang.com/5cf63a960001340f18720632.jpg);
	background-size: contain;
}

.slide2 {
	background-image: url(https://img.mukewang.com/5cee21c80001263e16000540.jpg);
	background-size: contain;
}

.slide3 {
	background-image: url(../images/123.jpg);
	background-size: contain;
}

.slide_active {
	display: block;
}

.button {
	position: absolute;
	width: 40px;
	height: 80px;
	left: 244px;
	top: 50%;
	margin-top: -40px;
	background: url(../img/arrow.png) center center no-repeat;
}

.prev {
	transform: rotate(180deg);
}

.next {
	left: auto;
	right: 0;
}

.button:hover {
	background-color: #333;
	opacity: 0.6;
	filter: alpha(opacity=60);
}

.dots {
	position: absolute;
	right: 0;
	bottom: 24px;
	top: 316px;
	text-align: right;
	right: 20px;
}

.dots span {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(7, 17, 27, 0.4);
	margin-left: 8px;
	line-height: 12px;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
	cursor: pointer;
}

.dots span.active {
	box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
	background: #fff;
}

.menu-box {
	width: 244px;
	height: 460px;
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(7, 17, 27, 0.5);
	opacity: 0.5;
	z-index: 1;
}

.menu-contern {
	width: 244px;
	height: 461px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	padding-top: 6px;
	background: #2b333b;
}
.menu-item {
	height: 64px;
	line-height: 66px;
	font-size: 16px;
	padding-left: 12px;
	position: relative;
}

.menu-item a:link,
.menu-item a:visited {
	color: rgba(255,255,255,.6);
}
.menu-item:hover a{
	background-color: rgb(103,113,118);
	color: #FFF;
}
.imv2-arrow1_r{
	position: absolute;
	right: 13px;
	top: 29px;
	color: rgba(255,255,255,.5);
	font-size: 10px;
}
.js-menu-item-on a{
	background: rgba(107,113,118,1);
	color: #fff;
}
.menu-item a {
	display: block;
	color: rgba(255,255,255,.6);
	padding: 0 16px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	height: 60px;
	transition: all .1s;
	/*background: #d9dde1;*/
}

@font-face {
	font-family: "iconfont";
	src: url("../img/font/iconfont.eot");
	src: url("../img/font/iconfont.eot") format("embedded-opentype"), url("../img/font/iconfont.woff") format("woff"), url("../img/font/iconfont.tff") format("truetype"), url("../img/font/iconfont.svg#iconfog") format("svg");
}

.menu-item i {
	position: absolute;
	right: 32px;
	font-size: 32px;
	top: 2px;
	font-family: "iconfont";
	font-style: normal;
	font-weight: normal;
	color: rgba(255, 255, 255, 0.5);
}

.sub-menu {
	width: 730px;
	height: 460px;
	border: 1px solid #d9dde1;
	background: #fff;
	position: absolute;
	left: 244px;
	top: 0;
	z-index: 99;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.inner-box {
	background-color: #fff;
	padding: 12px 48px 32px;
	position: relative;
	min-height: 150px;
}

.sub-inner-box {
	/*width: 652px;*/
	/*margin-left: 40px;*/
	/*overflow: hidden;*/
	position: relative;
	height: 0.9px;
	margin: 35px 0 23px 0;
	background-color: rgba(77,85,93,.08);
}

.tittle {
	position: absolute;
	top: -12px;
	left: 0;
	padding-right: 12px;
	font-size: 14px;
	font-weight: 700;
	color: #f20d0d;
	line-height: 24px;
	background-color: #fff;
}

.bold {
	font-weight: bold;
}

.mr10 {
	margin-right: 20px;
}

.ml10 {
	margin-left: 20px;
}

a {
	text-decoration: none;
	color: #333;
}

.sub-row {
	width: 100%;
	margin-bottom: 25px;
}

.sub-row a {
	margin-left: 20px;
}

.hide {
	display: none;
}

.path-banner li,.shuju li {
	line-height: 30px;
	float: left;
	margin-bottom: 16px;
	font-size: 14px;
	color: #4d555d;
	/*line-height: 22px;*/
	margin-right: 24px;
	/*display: inline-block;*/
}

.path-banner {
	width: 936px;
	background-color: #FFFFFF;
	position: absolute;
	top: 434px;
	left: 414px;
	border-bottom-right-radius: 10px;
}

.path-banner li,
p {
	line-height: 10.5px;
	margin-left: 23px;
	font-size: 13px;
	transition: 1s;
	-moz-transition: 1s;
	/* Firefox 4 */
	-webkit-transition: 1s;
	/* Safari and Chrome */
	-o-transition: 1s;
	/* Opera */
}

.path-banner li:nth-child(1):hover {
	margin-top: -10px;
}

.path-banner li:nth-child(2):hover {
	margin-top: -10px;
}
.path-banner li:nth-child(3):hover {
	margin-top: -10px;
}
.path-banner li:nth-child(4):hover {
	margin-top: -10px;
}
.path-banner li:nth-child(5):hover {
	margin-top: -10px;
}
.path-banner i {
	margin-left: 50px;
	display: inline-block;
	width: 36px;
	height: 36px;
	background: url(../images/path-2019.png) no-repeat;
	background-size: 100%;
	margin-top: 22px;
}

.path-banner .i-web {
	background-position: center 0;
}

.path-banner .i-java {
	background-position: center -36px;
}

.path-banner .i-android {
	background-position: center -72px;
}

.path-banner .i-php {
	background-position: center -108px;
}

.path-banner .i-python {
	background-position: center -144px;
}


.recomment-box {
  position: absolute;
  bottom: 0;
  /*background: #F8FAFC;*/
 background-color: red;
  padding: 36px 0 0px 48px;
}
.recomment-box div{
	float: left;
}
.recomment-box a {
  display: block;
  width: 100%;
  height: 100%;
}
.recomment-box .adsense-box {
  width: 312px;
  height: 64px;
  /*background-color: #ccc;*/
 /*background: red;*/
  border-radius: 4px;
  margin-right: 48px;
}
.recomment-box .banner-course-card {
  width: 312px;
  height: 60px;
  margin-right: 48px;
  margin-bottom: 36px;
}
.recomment-box .banner-course-card img {
  width: 64px;
  height: 42px;
  border-radius: 4px;
  /*background-color: #ccc;*/
  /*background-color: red;*/
}
.recomment-box .banner-course-card .course-card {
  margin-left: 16px;
}
.recomment-box .banner-course-card .course-card-name {
  width: 232px;
  font-size: 12px;
  color: #07111B;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recomment-box .banner-course-card .course-card-info,
.recomment-box .banner-course-card .course-card-price {
  font-size: 12px;
  color: #4D555D;
  line-height: 20px;
}
.recomment-box .banner-course-card .course-card-info span {
  margin-right: 12px;
}
.recomment-box .banner-course-card .course-card-price.sales {
  color: #f01414;
}
.recomment-box .banner-course-card .course-card-price.studentsales .sales-tip {
  padding: 0;
  border: 0;
}

.cart-color {
  background: linear-gradient(270deg, rgba(255, 115, 155, 0.7), #ff739b);
}
/*红色*/
.cart-color.red {
  background: linear-gradient(270deg, rgba(255, 115, 155, 0.7), #ff739b);
}
/*橙色*/
.cart-color.orange {
  background: linear-gradient(270deg, rgba(255, 150, 0, 0.7), #ff9600);
}
/*绿色*/
.cart-color.green {
  background: linear-gradient(270deg, rgba(0, 185, 90, 0.7), #00b95a);
}
/*青色*/
.cart-color.cyan {
  background: linear-gradient(270deg, rgba(0, 200, 200, 0.7), #00c8c8);
}
/*蓝色*/
.cart-color.blue {
  background: linear-gradient(270deg, rgba(75, 150, 220, 0.7), #4b96dc);
}
/*紫色*/
.cart-color.purple {
  background: linear-gradient(270deg, rgba(210, 115, 230, 0.7), #d273e6);
}
@font-face {
  font-family: 'dincondm';
  src: url('/static/fonts/DINCondm/DINCOND-MEDIUM.otf');
  font-style: normal;
}

.course-card-price {
  font-size: 10px;
  color: #4D555D;
  line-height: 20px;
}
.course-card-price .sales-tip {
  border-radius: 2px;
  padding: 0 4px;
  margin-left: 4px;
}
.course-card-price .sales-tip i {
  font-style: normal;
  margin-left: 4px;
}
.course-card-price.sales {
  color: #F01414 !important;
}
.course-card-price.sales .sales-tip {
  background: rgba(240, 20, 20, 0.06);
}
.course-card-price.salesbefore {
  color: #93999F;
}
.course-card-price.salesbefore .sales-tip {
  border: 1px solid #D9DDE1;
  box-sizing: border-box;
}
.course-card-price.studentsales .sales-tip {
  border: 1px solid rgba(240, 20, 20, 0.2);
  box-sizing: border-box;
  color: rgba(240, 20, 20, 0.6);
}
.course-card-container {
	float: left;
	margin-top: 100px;
	margin-left: 20px;
  width: 216px;
  height: 252px;
  position: relative;
  transition: .3s all linear;
}
.course-card-container:nth-child(1){
	margin-left: 194px;
}
.course-card-container:hover .course-card-top.hashadow {
  box-shadow: 0 8px 16px 0 rgba(7, 17, 27, 0.1);
}
.course-card-container:hover .course-card-top .course-banner {
  background-color: #fff;
}
.course-card-container:hover .course-card-top .course-banner .img-up {
  top: -10px;
  left: 0px;
  width: 216px;
}
.course-card-container:hover .course-card-top .course-banner .img-mid {
  top: 0px;
  left: 8px;
  width: 200px;
}
.course-card-container:hover .course-card-top .course-banner .img-down {
  top: 10px;
  left: 16px;
  width: 184px;
}
.course-card-container:hover .course-card-name {
  color: #F01414 !important;
}
.course-card-container .course-rate {
  position: absolute;
  width: 42px;
  right: -7px;
  top: 8px;
  text-align: center;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 20px;
  background-image: linear-gradient(-90deg, #65da98 0%, #0cba4d 100%);
  border: 2px solid #FFFFFF;
  border-radius: 12px;
  box-sizing: border-box;
  z-index: 1;
}
.course-card-container .course-stat {
  position: absolute;
  border: 2px solid #FFFFFF;
  border-radius: 12px;
  top: 8px;
  left: -8px;
  z-index: 4;
  font-family: 'dincondm';
  font-size: 12px;
  color: #FFFFFF;
  line-height: 20px;
  padding: 0 8px;
}
.course-card-container .course-stat.new {
  background-color: #FFAA00;
  background-image: linear-gradient(90deg, #ffaa00 17%, #f76b1c 100%);
}
.course-card-container .course-stat.hot {
  background-color: #F02930;
  background-image: linear-gradient(90deg, #f68688 0%, #f02930 100%);
}
.course-card-container .course-stat.upgrade {
  background-color: #9447EB;
  background-image: linear-gradient(90deg, #bd89f8 6%, #9447eb 93%);
}
.course-card-container .course-card-top {
  width: 216px;
  height: 120px;
  position: relative;
  border-radius: 8px;
  transition: all .3s;
}
.course-card-container .course-card-top.hashadow {
  overflow: hidden;
}
.course-card-container .course-card-top .course-banner {
  width: 100%;
  height: 100%;
  background-color: #f3f5f7;
  border-radius: 8px;
}
.course-card-container .course-card-top .course-banner .img-up,
.course-card-container .course-card-top .course-banner .img-mid,
.course-card-container .course-card-top .course-banner .img-down {
  margin: 0 auto;
  position: absolute;
  border-radius: 8px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  /* Firefox 4 */
  -webkit-transition: all 0.3s;
  /* Safari and Chrome */
  -o-transition: all 0.3s;
  /* Opera */
}
.course-card-container .course-card-top .course-banner .img-up {
  left: 0px;
  top: 0;
  width: 216px;
  height: 120px;
  z-index: 3;
}
.course-card-container .course-card-top .course-banner .img-mid {
  top: 4px;
  left: 4px;
  width: 208px;
  height: 120px;
  opacity: 0.4;
  z-index: 2;
}
.course-card-container .course-card-top .course-banner .img-down {
  top: 8px;
  left: 8px;
  width: 200px;
  height: 120px;
  opacity: 0.2;
  z-index: 1;
}
.course-card-container .course-card-top .course-label {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 16px;
}
.course-card-container .course-card-top .course-label label {
  display: inline-block;
  background: rgba(7, 17, 27, 0.4);
  border-radius: 12px;
  padding: 4px 8px;
  margin-right: 4px;
  margin-bottom: 2px;
  margin-right: 0px;
  font-weight: 200;
}
.course-card-container .course-card-content {
  padding: 12px 8px;
}
.course-card-container .course-card-content .course-card-name {
  font-size: 14px;
  color: #07111B;
  line-height: 24px;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 46px;
  transition: all .3s;
}
.course-card-container .course-card-content .course-card-info {
  font-size: 12px;
  color: #93999F;
  line-height: 24px;
  margin-top: 8px;
  font-weight: 400;
}
.course-card-container .course-card-content .course-card-info span {
  display: inline-block;
  margin-right: 12px;
}
.course-card-container .course-card-content .course-card-info .icon-set_sns {
  margin-right: 2px;
}
.course-card-container .course-card-content .course-card-info .course-star-box {
  color: rgba(255, 153, 0, 0.4);
  margin-right: 0;
}
.course-card-container .course-card-content .course-card-info .course-star-box span {
  margin-right: 0;
}
.course-card-container .course-card-content .course-card-info .course-star-box .on {
  color: #ff9900;
}
.container-types {
width: 1152px;
margin-left: auto;
margin-right: auto;
position: relative;
padding: 36px 0 48px;
}
.container-types .wonderful-list {
margin-left: 0px !important;
width: 1152px;
min-height: 560px;
position: relative;
}
.container-types .wonderful-list .wenda-tit {
display: block;
transition: all .3s;
}
.container-types .wonderful-list .wenda-tit:hover {
color: #00B43C;
}
.container-types .wonderful-list .item {
position: absolute;
padding: 24px 32px 32px 32px;
width: 372px;
box-sizing: border-box;
background: #FFFFFF;
box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
border-radius: 8px;
transition: all .3s;
margin-right: 18px;
margin-bottom: 18px;
/*专题*/
/*手记猿问相关*/
}
.container-types .wonderful-list .item:hover {
box-shadow: 0 8px 16px 0 rgba(7, 17, 27, 0.1);
}
.container-types .wonderful-list .item label i {
font-size: 16px;
margin-right: 4px;
vertical-align: text-bottom;
}
.container-types .wonderful-list .item .bottom-info {
font-size: 12px;
color: #93999F;
line-height: 24px;
margin-top: 12px;
font-weight: 400;
}
.container-types .wonderful-list .item .bottom-info .icon-right {
margin-left: 4px;
}
.container-types .wonderful-list .item .bottom-info span {
margin-right: 24px;
}
.container-types .wonderful-list .item .bottom-info a {
transition: all .3s;
}
.container-types .wonderful-list .item .green {
color: rgba(0, 180, 60, 0.6);
}
.container-types .wonderful-list .item a.green:hover {
color: #00B43C;
}
.container-types .wonderful-list .item .blue {
color: rgba(0, 140, 200, 0.6);
}
.container-types .wonderful-list .item a.blue:hover {
color: #008CC8;
}
.container-types .wonderful-list .item label.topic-label {
display: inline-block;
font-size: 12px;
color: #FFFFFF;
line-height: 24px;
background: rgba(0, 180, 60, 0.5);
border-radius: 12px;
padding: 0 12px;
margin-bottom: 8px;
}
.container-types .wonderful-list .item .topic-period {
display: block;
}
.container-types .wonderful-list .item .topic-period .big-tit {
font-size: 16px;
color: rgba(0, 180, 60, 0.8);
line-height: 24px;
width: 224px;
transition: all .3s;
}
.container-types .wonderful-list .item .topic-period .big-tit:hover {
color: #00B43C;
}
.container-types .wonderful-list .item .topic-period img {
width: 72px;
height: 72px;
border-radius: 8px;
background-color: #f3f5f7;
}
.container-types .wonderful-list .item .topic-content {
font-weight: 400;
font-size: 12px;
color: #4D555D;
line-height: 24px;
margin-top: 12px;
}
.container-types .wonderful-list .item .link-box {
text-align: right;
}
.container-types .wonderful-list .item .link-box .for-details {
font-size: 12px;
color: #00B43C;
line-height: 24px;
}
.container-types .wonderful-list .item .link-box .for-details i {
margin-left: 4px;
}
.container-types .wonderful-list .item .tit-line {
position: relative;
background-color: #D9DDE1;
height: 1px;
margin: 24px 0;
font-weight: 400;
}
.container-types .wonderful-list .item .tit-line span {
position: absolute;
font-size: 12px;
padding-right: 12px;
color: #93999F;
background-color: #fff;
line-height: 16px;
top: -8px;
left: 0;
}
.container-types .wonderful-list .item .review-topic .topic-period {
margin-bottom: 16px;
}
.container-types .wonderful-list .item .review-topic .topic-period .big-tit {
font-size: 14px;
color: #4D555D;
transition: all .3s;
}
.container-types .wonderful-list .item .review-topic .topic-period .big-tit:hover {
color: #00B43C;
}
.container-types .wonderful-list .item label.article-label,
.container-types .wonderful-list .item label.wenda-label {
line-height: 16px;
margin-bottom: 8px;
display: inline-block;
font-size: 12px;
}
.container-types .wonderful-list .item .article-tit .big-tit:hover {
color: #008CC8;
}
.container-types .wonderful-list .item .article-tit .big-tit,
.container-types .wonderful-list .item .wenda-tit .big-tit {
font-size: 16px;
color: #07111B;
line-height: 24px;
transition: all .3s;
}
.container-types .wonderful-list .item .article-tit .big-tit.hasimg,
.container-types .wonderful-list .item .wenda-tit .big-tit.hasimg {
width: 224px;
}
.container-types .wonderful-list .item .article-tit img,
.container-types .wonderful-list .item .wenda-tit img {
width: 72px;
height: 48px;
}
.container-types .wonderful-list .item .article-content {
margin-top: 8px;
}
.container-types .wonderful-list .item .article-content,
.container-types .wonderful-list .item .wenda-content {
font-size: 12px;
color: #4D555D;
line-height: 24px;
text-align: justify;
word-break: break-all;
font-weight: 400;
}
.container-types .wonderful-list .item .best-label {
font-size: 12px;
color: #07111B;
line-height: 24px;
display: inline-block;
margin-top: 8px;
}
.container-types .star-list .lead-list {
width: 544px;
margin: 38px auto 48px;
}
.container-types .star-list .lead-list dd {
width: 136px;
text-align: center;
float: left;
}
.container-types .star-list .lead-list .lead-item-photo {
width: 56px;
height: 56px;
margin: 0 auto;
position: relative;
}
.container-types .star-list .lead-list .lead-item-photo img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0 8px 16px 0 rgba(7, 17, 27, 0.1);
}
.container-types .star-list .lead-list .lead-item-photo span {
position: absolute;
width: 26px;
height: 18px;
top: -16px;
left: 15px;
background: url(/static/img/index/champion.png) no-repeat;
background-size: 100%;
}
.container-types .star-list .lead-list .lead-item-photo span.green {
background-position: center -18px;
}
.container-types .star-list .lead-list .lead-item-photo span.blue {
background-position: center -36px;
}
.container-types .star-list .lead-list .lead-item-photo span.purple {
background-position: center 0;
}
.container-types .star-list .lead-list .lead-item-photo span.yellow {
background-position: center -54px;
}
.container-types .star-list .lead-list .lead-item-name {
font-size: 14px;
color: #07111B;
line-height: 16px;
margin-top: 8px;
}
.container-types .star-list .lead-list .lead-item-tit {
font-size: 12px;
color: #93999F;
font-weight: 400;
}
.container-types .star-list .other-list {
width: 888px;
margin: auto;
}
.container-types .star-list .other-list dd.green div {
background: #00b46d;
}
.container-types .star-list .other-list dd.green .cur {
color: #00b46d;
}
.container-types .star-list .other-list dd.blue div {
background: #008cc8;
}
.container-types .star-list .other-list dd.blue .cur {
color: #008cc8;
}
.container-types .star-list .other-list dd.purple div {
background: #653ddd;
}
.container-types .star-list .other-list dd.purple .cur {
color: #653ddd;
}
.container-types .star-list .other-list dd {
position: relative;
float: left;
border-radius: 48px;
font-size: 0;
/*margin-right: 36px;*/
margin-right: 28px;
margin-bottom: 24px;
box-sizing: border-box;
border: 2px solid #fff;
transition: all .3s;
}
.container-types .star-list .other-list dd a {
display: block;
width: 100%;
height: 100%;
}
.container-types .star-list .other-list dd.green:hover {
border: 2px solid #00b46d;
}
.container-types .star-list .other-list dd.blue:hover {
border: 2px solid #008cc8;
}
.container-types .star-list .other-list dd.purple:hover {
border: 2px solid #653ddd;
}
.container-types .star-list .other-list dd div {
position: absolute;
display: none;
border-radius: 8px;
color: #FFFFFF;
top: -110px;
left: -83px;
width: 202px;
height: 90px;
text-align: center;
box-sizing: border-box;
padding: 13px 24px 0;
}
.container-types .star-list .other-list dd div .cur {
position: absolute;
bottom: -9px;
font-size: 40px;
left: 93px;
line-height: 20px;
}
.container-types .star-list .other-list dd .title {
font-size: 12px;
line-height: 16px;
font-weight: 400;
}
.container-types .star-list .other-list dd .nickname {
font-size: 14px;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.container-types .star-list .other-list dd .desc {
font-size: 12px;
line-height: 16px;
margin-top: 8px;
font-weight: 400;
}
.container-types .star-list .other-list img {
height: 48px;
width: 48px;
border-radius: 48px;
box-sizing: border-box;
background-color: #f3f5f7;
border: 2px solid #fff;
}
.container-types .types-title {
position: relative;
font-size: 14px;
color: #93999F;
letter-spacing: 0.6px;
line-height: 36px;
text-align: center;
}
.container-types .types-title em {
font-size: 20px;
font-weight: 600;
color: #4D555D;
margin: 0 3px;
}
.container-types .types-title .tit-icon {
display: inline-block;
vertical-align: bottom;
width: 56px;
height: 36px;
background: url(/static/img/index/icon.png) no-repeat;
background-size: 100%;
}
.container-types .types-title .tit-icon-l {
margin-right: 24px;
}
.container-types .types-title .tit-icon-r {
margin-left: 24px;
}
.container-types .types-title span.icon-shizhan-l {
background-position: center 0;
}
.container-types .types-title span.icon-shizhan-r {
background-position: center -36px;
}
.container-types .types-title span.icon-new-l {
background-position: center -72px;
}
.container-types .types-title span.icon-new-r {
background-position: center -108px;
}
.container-types .types-title span.icon-job-l {
background-position: center -144px;
}
.container-types .types-title span.icon-job-r {
background-position: center -180px;
}
.container-types .types-title span.icon-skill-l {
background-position: center -216px;
}
.container-types .types-title span.icon-skill-r {
background-position: center -252px;
}
.container-types .types-title span.icon-tech-l {
background-position: center -288px;
}
.container-types .types-title span.icon-tech-r {
background-position: center -324px;
}
.container-types .types-title span.icon-art-l {
background-position: center -360px;
}
.container-types .types-title span.icon-art-r {
background-position: center -396px;
}
.container-types .types-title span.icon-teacher-l {
background-position: center -432px;
}
.container-types .types-title span.icon-teacher-r {
background-position: center -468px;
}
.container-types .types-title span.icon-star-l {
background-position: center -504px;
}
.container-types .types-title span.icon-star-r {
background-position: center -540px;
}
.container-types .types-title .types-title-more {
position: absolute;
color: #93999f;
height: 20px;
top: 8px;
right: 10px;
font-size: 12px;
line-height: 36px;
}
.container-types .types-title .types-title-more span,
.container-types .types-title .types-title-more i {
float: left;
margin-right: 4px;
line-height: 20px;
}
.container-types .types-title .types-title-more i {
font-size: 16px;
}
.container-types .types-title .types-title-more:hover {
color: #4d555d;
}
.container-types .types-content {
margin-top: 24px;
margin-left: -18px;
}
.container-types .index-card-container {
float: left;
margin-left: 18px;
border-radius: 4px;
margin-bottom: 12px;
}
.container-types .adsense-box {
margin-bottom: 36px;
margin-left: 18px;
border-radius: 8px;
transition: all 0.3s;
text-align: center;
}
.container-types .adsense-box a {
display: block;
width: 567px;
height: 108px;
border-radius: 8px;
overflow: hidden;
padding: 30px 0;
box-sizing: border-box;
background: rgba(7, 17, 27, 0.4);
}
.container-types .adsense-box a h3 {
font-size: 20px;
font-weight: 700;
color: #FFFFFF;
letter-spacing: 2px;
line-height: 28px;
text-shadow: 0 2px 2px rgba(7, 17, 27, 0.4);
}
.container-types .adsense-box a p {
font-size: 12px;
color: #FFFFFF;
line-height: 16px;
text-shadow: 0 2px 2px rgba(7, 17, 27, 0.4);
margin-top: 4px;
}
.container-types .adsense-box:hover {
box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.2);
}
.container-types .advert-cart {
float: left;
width: 224px;
height: 228px;
overflow: hidden;
box-sizing: border-box;
transition: all .3s;
}
.container-types .advert-cart img {
display: block;
width: 224px;
height: 228px;
border: none;
outline: none;
}
.container-types .advert-cart:hover {
box-shadow: 0 8px 16px 0 rgba(7, 17, 27, 0.2);
}
.container-types .article,
.container-types .question {
width: 590px;
}
.container-types li {
margin-bottom: 16px;
}
.container-types li:last-child {
margin-bottom: 0;
}
.container-types li .label {
float: left;
padding: 5px 10px;
background-color: #fff;
font-size: 12px;
color: #4d555d;
line-height: 12px;
border: 1px solid #b9bdc1;
border-radius: 20px;
margin-right: 12px;
}
.container-types li i {
float: left;
line-height: 24px;
margin-right: 9px;
}
.container-types li .content {
float: left;
color: #000000;
font-size: 14px;
line-height: 24px;
}
.container-types li .content:hover {
color: #f01414;
}
.container-types .lecturer-list {
margin-top: 40px;
}
.container-types .lecturer-item {
float: left;
position: relative;
width: 216px;
height: 248px;
margin-right: 18px;
box-sizing: border-box;
text-align: center;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
border-radius: 12px;
transition: all .3s;
}
.container-types .lecturer-item:last-child {
margin-right: 0;
}
.container-types .lecturer-item:hover {
background-color: #fff;
box-shadow: 0 8px 16px 0 rgba(7, 17, 27, 0.2);
}
.container-types .lecturer-item:hover .lecturer-uimg {
width: 60px;
height: 60px;
margin-left: -30px;
transition: all .3s;
}
.container-types .lecturer-item:hover .lecturer-p {
position: relative;
height: 168px;
top: -92px;
color: #07111B;
transition: all .3s;
}
.container-types .lecturer-item:hover .lecturer-name,
.container-types .lecturer-item:hover .lecturer-title {
opacity: 0;
}
.container-types .lecturer-item .lecturer-uimg {
position: absolute;
top: -16.6px;
left: 50%;
margin-left: -48px;
width: 96px;
height: 96px;
border-radius: 50%;
}
.container-types .lecturer-item .lecturer-name {
display: block;
font-size: 16px;
line-height: 24px;
margin-top: 92px;
padding: 0 36px;
white-space: nowrap;
color: #07111b;
font-weight: 700;
text-overflow: ellipsis;
word-break: break-all;
word-wrap: break-word;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.container-types .lecturer-item .lecturer-title {
display: block;
font-size: 12px;
margin-bottom: 12px;
color: #4D555D;
height: 24px;
line-height: 24px;
}
.container-types .lecturer-item .lecturer-p {
position: relative;
top: 0;
display: block;
font-size: 12px;
line-height: 24px;
color: #4D555D;
height: 72px;
padding: 0 36px;
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-align: justify;
word-break: break-all;
font-weight: 400;
}
.container-teacher-types .types-title {
color: rgba(255, 255, 255, 0.4);
}
.container-teacher-types .types-title em {
color: #ffffff;
}